<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view class="compView">
			<view class="compViews">
				<view class="compView-one">
					<view class="compView-one-txt">投诉号码</view>
					<view class="compView-one-ipt">
						<uni-easyinput :inputBorder="false" v-model="value" placeholder="请输入投诉号码"></uni-easyinput>
					</view>
				</view>
				<view class="compView-one">
					<view class="compView-one-txt">联系方式</view>
					<view class="compView-one-ipt">
						<uni-easyinput :inputBorder="false" v-model="value" placeholder="请输入联系方式"></uni-easyinput>
					</view>
				</view>
				<view class="compView-one">
					<view class="compView-one-txt">问题描述</view>
					<view class="compView-one-ipt" style="padding-left: 25rpx;">
						<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
							<uni-easyinput type="textarea" :inputBorder="false" v-model="value"
								placeholder="请输入内容"></uni-easyinput>
						</uni-section>
					</view>
				</view>
				<view class="compView-one">
					<view class="compView-one-txt">问题图片</view>
					<view class="compView-one-ipt">
						<view class="pt-img">
							<image src="/static/index/pz.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view class="compViews-gx">
				<view class="gx-img">
					<image src="/static/qq1.png" mode=""></image>
				</view>
				<!-- <view class="gx-img">
					<image src="/static/qq2.png" mode=""></image>
				</view> -->
				<view class="gx-txt">同意商家客服获取投诉描述、图片证据和手机号码，以便联系您解决问题。</view>
			</view>
			
			<view class="compViews-btm">
				<view class="compViews-btm-kf">投诉联系客服</view>
				<view class="compViews-btm-tj">提交</view>
			</view>
			
			
			
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px",
				
			}
		},
		onLoad() {
			this.GaoDu() //判断手机高度
		},
		methods: {
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		background: #ECF5FF;
	}
.compView{
	padding: 24rpx;
}
.compViews{
	padding: 24rpx;
	background: #fff;
	border-radius: 10rpx;
}
.compView-one{
	display: flex;
	border-bottom: 3rpx solid #F5F6F8;
	padding: 20rpx 0rpx;
}
.compView-one-txt{
	width: 25%;
	font-size: 28rpx;
	line-height: 63rpx;
}
.compView-one-ipt{
	width: 75%;
}
.compView-one-ipt input{
	
}
.compView-one-ipt textarea{
	height: 80rpx;
}
.pt-img{
	width: 150rpx;
	height: 150rpx;
}
.pt-img image{
	width: 100%;
	height: 100%;
}
.compViews-gx{
	display: flex;
	padding-top: 30rpx;
}
.gx-img{
	width: 40rpx;
	height: 40rpx;
	padding-top: 15rpx;
}
.gx-img image{
	width: 100%;
	height: 100%;
}
.gx-txt{
	font-size: 28rpx;
	width: 90%;
	padding-left: 20rpx;
	font-weight: 600;
}
.compViews-btm{
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-between;
	width: 90%;
	margin: auto;
	padding-top: 60rpx;
}
.compViews-btm-kf{
	width: 48%;
	height: 80rpx;
	border-radius: 15rpx;
	background: #1989FA;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 28rpx;
}
.compViews-btm-tj{
	width: 48%;
	height: 80rpx;
	border-radius: 15rpx;
	background: #07C160;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 28rpx;
}
	@import url("@/pages/css.css");
</style>